<template>
  <div class="imglist-box">
    <van-tabs @change="changeCate">
      <van-tab
        v-for="item in cateList"
        :title="item.title" 
        :name="item.id"
        :key='item.id'>
      </van-tab>
    </van-tabs>
    
    <div class="lazy-list">
      <img @click="goDetail(item.id)" v-for="item in imgList" v-lazy="item.img_url" :key="item.id">
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      cateList: [],
      imgList: []
    }
  },
  created() {
    this.getCateList()
    this.getImgList(0)
  },
  methods: {
    async getCateList() {
      const { data: res } = await this.$http.get('/api/getimgcategory')
      if(res.status !== 0) return this.$toast('请求分类失败')
      res.message.unshift({
        id: 0,
        title: "全部"
      })
      this.cateList = res.message
    },
    async getImgList(cateId) {
      const { data: res } = await this.$http.get(`api/getimages/${cateId}`)
      if(res.status !== 0) return this.$toast('请求分类失败')

      this.imgList = res.message
    },
    changeCate(name) {
      this.getImgList(name)
    },
    goDetail(id) {
      this.$router.push(`imgdetail/${id}`)
    }
  }
}
</script>
<style lang="less" scoped>
  .imglist-box{
    .lazy-list{
      padding: 0 5px;
      img{
        width: 100%;
        display: block;
        padding: 5px;
        box-sizing: border-box;
      }
    }
  }
</style>